<template><!--站内信-->
    <div style="height:100%;position: relative;">
        <navbar :title="$t('message_label')" :backCallback="back">
            <template #right>
                <span style="position: absolute;right: 0;" class="font-size15 write-btn-right" v-if="checkedNames.length == 0 || wmsg_subject == '' || wmsg_content_pc == ''">{{ $t("message_send") }}</span><!--发送-->
                <span style="position: absolute;right: 0;" class="font-size15 write-btn-right cur" v-if="checkedNames.length != 0 && wmsg_subject != '' && wmsg_content_pc != ''" @click="submit">{{ $t("message_send") }}</span>
            </template>
        </navbar>
        <div class="content-noBottom">
            <div class="layer-content-box">
                <div class="add-contents-box">
                    <div class="clearfix white-bg paddingLR15 font-size15" style="height: 85px;line-height: 85px;" @click="selectedUser">
                        <span class="font-size15">{{ $t("message_recipient") }}</span><!--收件人-->
                        <i class="arrow-right"></i>
                        <span class="color666" style="float: right;margin-right: 5px;">
                            {{ checkedNames.length }}{{ $t("mod_people") }}
                        </span>
                    </div>
                    <p class="word-title-06">{{ $t("message_subject") }}</p><!--消息标题-->
                    <div class="white-bg bottom-shadow">
                        <textarea  name="tipsTitle" :placeholder="$t('message_subject_tips')" style="height: 41px;" v-model="wmsg_subject" v-validate="'tipsTitle'"></textarea><!--输入标题内容...-->
                        <p class="font-size11 colorfd3 warning-red-tan warning" v-if="errors.has('tipsTitle')">{{ $t('exceeded_word_range_tips', {'value': '40'}) }}</p><!--40-->
                    </div>
                    <p class="word-title-06">{{ $t("message_content") }}</p><!--消息描述-->
                    <div class="white-bg">
                        <textarea name="tipsConect" :placeholder="$t('message_content_tips')" v-model="wmsg_content_pc" v-validate="'tipsConect'"></textarea><!--输入描述内容...-->
                        <p class="font-size11 colorfd3 warning-red-tan warning" v-if="errors.has('tipsConect')">{{ $t('exceeded_word_range_tips', {'value': '1000'}) }}</p><!--1000-->
                    </div>
                </div>
            </div>
        </div>
        <!--选人-->
        <div class="selected-user" v-if="isShowSelectUser">
            <div class="layer-header-box white-bg"><!--收件人-->
                <span class="icon-back" @click="selectedBack()"></span>
                {{ $t("message_recipient") }}
                <span style="position: absolute;right: 0;" class="font-size15 write-btn-right" v-if="tempCheckedNames.length == 0">{{ $t("group_confirm") }}</span><!--完成-->
                <span style="position: absolute;right: 0;" class="font-size15 write-btn-right cur" v-if="tempCheckedNames.length != 0" @click="selectedFinsh()">{{ $t("group_confirm") }}</span>
            </div>
            <div style="height: calc(100% - 50px);" class="body-content" :class="{'height-100' : total === 0}">
                <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                    <van-list
                    v-model="isLoading"
                    :finished="finished"
                    :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                    loding-text="loading"
                    @load="getAddMemberList"
                    >
                        <div>
                            <div class="userSearch-input"><!--用户名/全名/部门/职级-->
                                <input type="text" :placeholder="$t('search_tips_1')" @keyup="searchUser" v-model="searchName">
                                <i class="input-delete-box-01" @click="deleteSearch()" v-if="searchName.length > 0"><i class="input-delete-icon-01"></i></i>
                            </div>
                            <ul class="userSearch-list-select">
                                <li v-for="(item, index) in memberList" :key="index" style="width: 100%;">
                                    <label :for="index">
                                        <div class="select-box clearfix">
                                            <div class="select-radio">
                                                <input type="checkbox" hidden :id="index" :value="item" v-model="tempCheckedNames">
                                                <span></span>
                                            </div>
                                            <div class="border-box">
                                                <div class="border-box-2">
                                                    <div class="img-box">
                                                        <img :src="appUrl + item.usr_photo" alt="">
                                                    </div>
                                                    <div class="title-box">
                                                        <p style="display: inline-block;">{{item.usr_display_bil}}</p>
                                                        <div><span class="margin-right5">{{item.usg_display_bil}}</span><span v-if="item.ugr_display_bil !== 'Unspecified'">{{ item.ugr_display_bil }}</span></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </label>
                                </li>
                            </ul>
                            <!--暂无数据-->
                            <div v-if="total === 0" class="white-bg" style="height: 300px;">
                                <div class="box-table" style="width:100%;height:100%;">
                                    <div class="box-table-cell" style="text-align: center;">
                                        <div class="no-data">
                                            <img src="../../../static/images/no-data.png" alt=""/>
                                            <p class="color999">{{ $t("no_data") }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
            </div>
        </div>
        <!--tip-->
        <van-dialog
        v-model="leaveHint"
        show-cancel-button
        :title="$t('confirm_exit_1')"
        :message="$t('confirm_exit_content_1')"
        :confirmButtonText="$t('sure')"
        :cancelButtonText="$t('cancel')"
        @confirm="$router.go(-1)"
        >
        </van-dialog>
        <div class="saving-box" v-if="savingShowBox">
            <p>
                <van-loading type="spinner" size="24" />
            </p>
            <p>{{ $t("sending") }}</p><!--发送中...-->
        </div>
    </div>
</template>

<script>
export default {
    name: 'Publish',
    data() {
        return {
            isShowSelectUser: false, //选人页面
            memberList: [], //选人信息
            checkedNames: [], //选好的人员
            total: 0,
            wmsg_subject: '', //标题
            wmsg_content_pc: '', //描述内容
            savingShowBox: false,
            leaveHint: false,
            tempCheckedNames: [], //选好的人员缓存
            finished: false,
            isRefresh: false
        };
    },
    methods: {
        back() {
            if (this.wmsg_subject === '' && this.wmsg_content_pc === '' && this.checkedNames.length < 1) {
                this.$router.go(-1);
            } else {
                this.leaveHint = true;
            }
        },
        /*发送*/
        submit() {
            this.$validator.validate().then(res => {
                if (res) {
                    let formData = new FormData();
                    let userIdArr = [];
                    for (var i = 0; i < this.checkedNames.length; i++) {
                        userIdArr.push(this.checkedNames[i].usr_ent_id);
                    }
                    formData.append('usr_ent_id_str', userIdArr.join('~'));
                    formData.append('wmsg_subject', this.wmsg_subject);
                    formData.append('wmsg_content_pc', this.wmsg_content_pc);
                    this.$axios({
                        method: 'POST',
                        url: '/app/message/sendMessage',
                        data: formData
                    }).then(res => {
                        this.savingShowBox = true;
                        setTimeout(() => {
                            this.savingShowBox = false;
                            this.$toast(this.$t('send_ok'));
                        }, 1000);
                        setTimeout(() => {
                            this.$router.replace({path: '/message?index=0'});
                        }, 4000);
                    });
                }
            });
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.memberList = [];
                this.pageNo = 1;
                this.getAddMemberList();
                this.isRefresh = false;
            }, 900);
        },
        /*用户搜索*/
        searchUser() {
            clearTimeout(this.indTime);
            this.indTime = setTimeout(() => {
                this.pageNo = 1;
                this.memberList = [];
                this.getAddMemberList();
            }, 500);
        },
        deleteSearch() {
            this.searchName = '';
            this.pageNo = 1;
            this.memberList = [];
            this.getAddMemberList();
        },
        /*用户列表*/
        getAddMemberList() {
            this.$axios({
                method: 'POST',
                url: '/app/message/findUserList',
                params: {
                    pageNo: this.pageNo,
                    search_name: this.searchName
                }
            }).then(res => {
                if (res.data.rows && res.data.rows.length !== 0) {
                    this.memberList = [...this.memberList, ...res.data.rows];
                }
                this.total = res.data.total;
                this.isLoading = false;
                this.pageNo++;
                if (this.memberList.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        /*选择收件人*/
        selectedUser() {
            this.pageNo = 1;
            this.searchName = '';
            this.memberList = [];
            this.tempCheckedNames = this.checkedNames;
            this.isShowSelectUser = true;
            this.getAddMemberList();
        },
        /*收件人选择返回上一层*/
        selectedBack() {
            this.tempCheckedNames = [];
            this.isShowSelectUser = false;
        },
        selectedFinsh() {
            this.checkedNames = this.tempCheckedNames;
            this.isShowSelectUser = false;
        }
    },
    created() {
        this.$Validator.extend('tipsTitle', {
            validate(value) {
                let num = 0;
                for (let i = 0; i < value.length; i++) {
                    if (value.charCodeAt(i) > 127 || value.charCodeAt(i) === 94) {
                        num += 2;
                    } else {
                        num += 1;
                    }
                }
                if (num > 80) {
                    return false;
                } else {
                    return true;
                }
            }
        });
        this.$Validator.extend('tipsConect', {
            validate(value) {
                let num = 0;
                for (let i = 0; i < value.length; i++) {
                    if (value.charCodeAt(i) > 127 || value.charCodeAt(i) === 94) {
                        num += 2;
                    } else {
                        num += 1;
                    }
                }
                if (num > 2000) {
                    return false;
                } else {
                    return true;
                }
            }
        });
    }
};
</script>

<style scoped>
    .arrow-right{
        margin: 36px 0 0 0;
    }
</style>
